<%--
  Created by IntelliJ IDEA.
  User: 傑
  Date: 2022/10/28
  Time: 11:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选座</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/img/jiejie_logo_s.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/select_seat.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/head.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body>
<!-- 头部导航 -->
<div class="header">
    <div class="header-inner">
        <div class="nav">
            <!-- logo -->
            <div class="logo">
                <a href=""><img src="${pageContext.request.contextPath}/img/jiejie_logo.png" alt=""></a>
            </div>
            <div>
                <div class="menu-item"><a href="${pageContext.request.contextPath}/index.jsp">首页</a></div>
                <div class="menu-item"><a href="${pageContext.request.contextPath}/pages/films.jsp">电影</a></div>
                <div class="menu-item"><a href="${pageContext.request.contextPath}/pages/cinema.jsp">影院</a></div>
                <div class="menu-item"><a href="${pageContext.request.contextPath}/orderby">榜单</a></div>
            </div>

            <div class="search-form">
                <input type="text" class="search-text">
                <a href=""><span class="search-img"></span></a>

            </div>
            <div class="head-user">
                <a href="home_login.html" class="loginBtn">登录</a>
                <a href="home_regist.html" class="loginBtn">注册</a>
            </div>
            <div class="user-info">
                <div class="user-avatar has-login">
                    <img src="https://img.meituan.net/maoyanuser/8b5a75c66ef4efb62fb695631b13419212452.png">
                    <ul class="user-menu yes-login-menu">
                        <li class="text"><a href="">我的订单</a></li>
                        <li class="text login-name" ><a href="javascript:void 0">基本信息</a></li>
                        <li class="text"><a href="javascript:void 0" class="J-logout" data-act="logout-click">退出登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 避免下面的块上移 -->
<div class="header-m"></div>
<div class="select_seat">

    <!-- 选座头部进度条-->
    <div class="order-bar">
        <div class="order-progress-bar">
            <div class="layui-progress" lay-filter="demo">
                <div class="layui-progress-bar layui-bg-red" lay-percent="50%"></div>
            </div>
        </div>
        <div class="order-progress-text">
            <span>选择影片场次</span>
            <span>选择座位</span>
            <span>14分钟内付款</span>
            <span>影院取票观影</span>
        </div>
    </div>


    <!-- 座位排版 -->
    <div class="hall">
        <div class="seat-example">
            <div class="selectable-example example">
                <span>可选座位</span>
            </div>
            <div class="sold-example example">
                <span>已售座位</span>
            </div>
            <div class="selected-example example">
                <span>已选座位</span>
            </div>
        </div>

        <div class="seats-block">
            <div class="row-id-container">
                <span class="row-id">1</span>
                <span class="row-id">2</span>
                <span class="row-id">3</span>
                <span class="row-id">4</span>
                <span class="row-id">5</span>
                <span class="row-id">6</span>
                <span class="row-id">7</span>
                <span class="row-id">8</span>
                <span class="row-id">9</span>
                <span class="row-id">10</span>
            </div>
            <div class="seats-container">
                <div class="screen-container" style="left: 45px">
                    <div class="screen">银幕中央</div>
                    <div class="c-screen-line"></div>
                </div>
                <div class="seat-wrapper">
                    <div class="row">
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                    <div class="row">
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                        <span class="seat selectable"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="side">
        <div class="movie-info clearfix">
            <!-- ::before -->
            <div class="poster">
                <img src="${pageContext.request.contextPath}/${movie.moviePicture}">
            </div>
            <div class="content">
                <p class="name text-ellipsis">${movie.movieCname}</p>
                <div class="info-item">
                    <span> 类型：</span>
                    <span class="value">${movie.movieType}</span>
                </div>
                <div class="info-item">
                    <span> 时长：</span>
                    <span class="value">${movie.movieDuration}分钟</span>
                </div>
            </div>
        </div>
        <div class="show-info">
            <div class="info-item">
                <span>影院:</span>
                <span class="value text-ellipsis">杰杰影院</span>
            </div>
            <div class="info-item">
                <span>影厅:</span>
                <span class="value text-ellipsis">${schedule.hallName}</span>
            </div>
            <div class="info-item">
                <span>版本：</span>
                <span class="value text-ellipsis">${movie.movieLanguage}</span>
            </div>
            <div class="info-item">
                <span>场次:</span>
                <span class="value text-ellipsis">${dataOne} ${schedule.scheduleBeginTime}</span>
            </div>
            <div class="info-item">
                <span>票价:</span>
                <span class="value1 text-ellipsis">￥
                    <span class="schedulePrice value text-ellipsis">${schedule.schedulePrice}</span>
                    /张
                </span>
            </div>
        </div>
        <div class="ticket-info">
            <div class="no-ticket" style="display: block;">
                <p class="buy-limit">座位:一次最多选6个座位</p>
                <p>
                    "请"
                    <span>点击左侧</span>
                    "座位图选择座位"
                </p>
            </div>
            <div class="has-ticket" style="display: none">
                <span class="text">座位:</span>
                <div class="ticket-container" data-limit="6">

                </div>
            </div>
            <div class="total-price">
                <span>总价:</span>
                <span class="price value text-ellipsis">
                        0
                    </span>
            </div>
        </div>
        <div class="confirm-order">
            <div class="cellphone">
                <span>手机号:</span>
                <span class="phone-num"></span>
            </div>
            <div class="confirm-btn disable" data-act="confirm-click" data-bid="b_0a0ep6pp">确认选座</div>
        </div>
    </div>
</div>
<div hidden="hidden">
    <span class="schedule value text-ellipsis">${schedule.scheduleId}</span>
</div>
<script src="${pageContext.request.contextPath}/js/select_seat.js"></script>
<!-- 进度条 -->
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script>
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use('element', function(){
            var element = layui.element;
        }
    );
// $(".disable").click(function (){
//     //同步
//     location.window.href="http:8080请求";
// })
</script>
</body>
</html>
